<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-15 09:36:58
 * @LastEditTime: 2019-10-19 11:57:09
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="longin">
    <div id="from">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules1"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <h3>后台管理系统</h3>
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')" @click.stop="">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- <button class="btn btn-primary" @click="dlbut">登录</button> -->
    </div>
  </div>
</template>

<script>
import vuex from 'vuex';
export default {
  name: "HelloWorld",
  data() {
    return {
      logining: false,
      ruleForm: {
        username: "",
        password: ""
      },
      rules1: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    // console.log($);
  },
  methods: {
    submitForm(formName) {
     var _this=this
      _this.$router.push({ name: "Container" });
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.logining = true;
          if (
            _this.ruleForm.username === "admin" &&
            _this.ruleForm.password === "123456"
          ) {
            _this.logining = false;
            sessionStorage.setItem("user", _this.ruleForm.username);
            // _this.$router.push({ path: "/" });
             _this.axios
            .post("api/checklogin", {
              params: {
                username: _this.ruleForm.username,
                password: _this.ruleForm.password * 1
              }
            })
            .then(response => {
              console.log("接收到的数据", response.data);
              if (response.data.length) {
             
                _this.$message({
                  message: "恭喜你，登录成功",
                  type: "success"
                });
                      _this.$store.commit("save_admin",response.data)
                      // 跳转到后台首页
                //  _this.$router.push({"path":'/'})
                 _this.$router.push({"path":'/'})
                 console.log( _this.$router.push)
                  
              } else {
                _this.$message.error("错了哦，这是一条错误消息");
              }
            });
      
          } else {
            _this.logining = false;
            _this.$alert("username or password wrong!", "info", {
              confirmButtonText: "ok"
            });
          }
          // alert("submit!");
          // 调用后台接口
       
         

        }
      });
    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
html,
body,
#longin,
#from {
  height: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
}
#from {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../images/img3.jpg");
}
.demo-ruleForm {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 40px 50px 10px 10px;
  background: white;
  opacity: 0.8;
}
.demo-ruleForm h3 {
  margin: 0px 0 20px 90px;
  /* text-align: center; */
  font-weight: bold;
  font-size: 26px;
}
</style>
